<template>
    <div>
        <div class="mb-8">
            <span class="title text-6 mb-8 mr-4">支付停车费</span>
            <span @click="router.push('/m/park-record')" class="text-slate-400"
                >返回</span
            >
        </div>
        <div class="data">
            <el-descriptions :column="1" size="large" border>
                <el-descriptions-item label="车牌号">{{
                    data.carNum
                }}</el-descriptions-item>
                <el-descriptions-item label="停车场">{{
                    data.parkName
                }}</el-descriptions-item>

                <el-descriptions-item label="进入时间">{{
                    dateFromat(data.enterTime)
                }}</el-descriptions-item>
                <el-descriptions-item label="离开时间">{{
                    dateFromat(data.leaveTime)
                }}</el-descriptions-item>
                <el-descriptions-item label="车位类型">
                    <el-tag type="info">{{
                        data.parkSpaceType === 0 ? '自由车位' : '固定车位'
                    }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="计费模式">
                    {{ amountInfo.hourPrice }} 元/小时
                </el-descriptions-item>
                <el-descriptions-item label="停车时长">
                    {{ amountInfo.dis }} 小时
                </el-descriptions-item>
                <el-descriptions-item label="总费用">
                    <span class="text-6"> {{ amountInfo.price }} 元 </span>
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="mt-8">
            <el-form-item label="支付方式">
                <el-radio-group v-model="payMethod">
                    <el-radio
                        v-for="item in payMethodList"
                        :key="item.id"
                        :label="item.name"
                        border
                        >{{ item.name }}</el-radio
                    >
                </el-radio-group>
            </el-form-item>
        </div>
        <div class="flex justify-center mt-16">
            <el-button
                type="primary"
                size="large"
                v-if="!isDone"
                icon="Check"
                @click="handlePay(data)"
                >支付</el-button
            >
            <div v-else class="text-6 text-green-700 flex flex-col justify-center items-center">
                <el-icon size="50"><CircleCheck /></el-icon>
                <div class="mt-4">
                    支付已完成！
                </div>
            </div>
        </div>
        <PayModal ref="payRef" />
    </div>
</template>

<script setup lang="ts">
import {
    getParkRecordByIdApi,
    getLastParkRecordApi,
    updateParkRecordApi,
} from '@/apis/parkRecord'
import { getGenPayRecordApi } from '@/apis/payRecord'
import { dateFromat } from '@/utils/dateFormat'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getPayMethodPageApi } from '@/apis/payMethod'
import PayModal from '@/components/PayModal.vue'
import dayjs from 'dayjs'

const router = useRouter()
const route = useRoute()

// 订单信息
const data = ref<any>({})
const amountInfo = ref<any>({})
const payMethod = ref<any>('微信')
// 支付是否完成
const isDone = ref<any>(false)

// 获取订单信息
const getData = async () => {
    const { recordId, carNum } = route.query
    if (!recordId) {
        const record = (await getLastParkRecordApi({
            carNum: carNum.toString(),
        })) as any
        data.value = record
    } else {
        const record = (await getParkRecordByIdApi(recordId.toString())) as any
        data.value = record
    }
    data.value.leaveTime = dateFromat(new Date().toString())

    // 产生订单
    const res = await getGenPayRecordApi({
        parkId: data.value.parkId,
        parkSpaceType: data.value.parkSpaceType,
        enterTime: data.value.enterTime,
        leaveTime: data.value.leaveTime,
    })

    amountInfo.value = res
    return
}
getData()

// 付款弹窗
const payRef = ref<any>(null)

// 点击支付
const handlePay = async (row) => {
    const leaveTime = dayjs(row.leaveTime || Date.now())
        .format('YYYY-MM-DD HH:mm:ss')
        .toString()
    const payRecord = (await getGenPayRecordApi({
        parkId: row.parkId,
        parkSpaceType: row.parkSpaceType,
        enterTime: row.enterTime,
        leaveTime,
    })) as any
    // 付钱产生支付记录
    const payRes = await payRef.value.pay({
        amount: payRecord.price,
        realAmount: payRecord.price,
        method: payMethod.value,
        type: 0,
        comment: `${row.carNum}停车费用`,
    })
    if (!payRes) return
    // 修改停车记录
    const updateRes = await updateParkRecordApi(row.id, {
        leaveTime,
        payRecordId: payRes.id,
    })
    if (updateRes) {
        isDone.value = true
        ElMessage.success('完成')
        router.back()
    }
}

const payMethodList = ref<any>([])
const getPayMethodList = async () => {
    const res = (await getPayMethodPageApi({
        limit: 1000,
    })) as any
    payMethodList.value = res.rows
}

getPayMethodList()
</script>

<style scoped></style>
